<template>
<div>
  <div class="finished">
    <div class="title">昨天及以前的计划</div>
    <div class="search">
      <el-input class="search_value" v-model="input" placeholder="请输入要查找日期:如2020-09-21"></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
    <div class="Learned"  v-for="item of plans" :key="item.id" v-show="!item.flag">
      <div class="finish_plan">{{item.plan}}</div>
      <div>共用时{{item.fm}}分{{item.fs}}秒</div>
    </div>
  </div>
</div>
</template>

<script>
import axios from 'axios'
import Qs from 'qs'
export default {
  data () {
    return {
      input: '',
      plans: []
    }
  },
  methods: {
    search () {
      this.plans = []
      axios({
        method: 'post',
        url: '/api/history',
        data: Qs.stringify({date: this.input})
      }).then(res => {
        console.log(res.data)
        this.plans = res.data
        this.input = ''
        if (this.plans.length === 0) {
          this.$message({
            message: '这天你未完成任何任务',
            type: 'warning'
          })
        } else {
          for (var i = 0; i < this.plans.length; i++) {
            this.plans[i].fm = Math.floor(this.plans[i].totaltime / 60)
            this.plans[i].fs = (this.plans[i].totaltime % 60)
            console.log(this.plans[i].fm, this.plans[i].fs)
          }
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.finished
  position absolute
  left 20%
  width 60%
  height:auto!important;
  height:45rem;
  min-height:45rem;
  margin 4rem auto
  background-color white
  .title
    width 96%
    margin 2rem auto
    padding-left 1rem
    background-color rgba(0 0 0 0.1)
  .search
    width 95%
    margin 0 auto
    padding-left 1rem
    .search_value
      width 90%
      float left
  .Learned
    width 90%
    margin 1rem auto
    padding .5rem 1rem
    box-shadow: 0 0 0.266667rem rgba(131,171,175,.5);
    border-radius .5rem
    .finish_plan
      font-size 1rem
</style>
